@charset "UTF-8";

/*代码优化*/
// @mixin animation($animation){
//     -webkit-animation: $animation;
//     -o-animation: $animation;
//     animation: $animation;
// }

// @mixin transform($transform){
//     -webkit-transform: $transform;
//     -moz-transform: $transform;
//     -ms-transform: $transform;
//     -o-transform: $transform;
//     transform: $transform;
// }
@import "mixin";/*引入外部的文件；名称只需要文件名，不需要符号之类的*/

@mixin box-sizing($box-sizing){
    -webkit-box-sizing: $box-sizing;
    -moz-box-sizing: $box-sizing;
    box-sizing: $box-sizing;
}
@mixin keyframes($name){
    @-webkit-keyframes #{$name}{
        @content;
    }
    @-moz-keyframes #{$name}{
        @content;
    }
    @-ms-keyframes #{$name}{
        @content;
    }
    @keyframes #($name){
        @content;
    }
}


@mixin opacity($opacity){
    opacity:$opacity;
    filter:alpha(opacity=$opacity);
}

@mixin text-fill-color($text-fill-color){

    -webkit-text-fill-color: $text-fill-color;
            text-fill-color: $text-fill-color;
}

@mixin bgPos($bgPosX,$bgPosY){
    background-position: $bgPosX,bgPosY;
}

@mixin fontSize($fontSize){
    font-size: $fontSize;
}

@mixin background($background){
   background : $background;
}

html,body{width: 100%;height: 100%;text-align: center;font-family: 'FangSong';color: #fff;/*font-size: 62.5%;*/}
.page-container{position: relative;max-width: 640px;margin: 0 auto;}

.m1{
  @include background(url(../images/m1.png) center no-repeat);
  // background: url(../images/m1.png) center no-repeat;
  width: 38px;height: 39px;}
.m2{
  @include background(url(../images/m2.png) center no-repeat);
  // background: url(../images/m2.png) center no-repeat;
  width: 38px;height: 39px;}

.btn_start { width: 90px; height: 90px; position: absolute; left: 0;top: 0; z-index: 10; margin-left: -45px;}
.btn_music{ 
    -webkit-background-size: 100% auto; background-size: 100% auto;
     position: fixed;  left: 10px;top: 10px; z-index: 8;}

.testMusic{position: absolute;top: 0;z-index: 10;}
.play{
    @include animation(play 4s linear infinite);
}

@include keyframes (play) {
  from {
    @include transform(rotate(0deg));
}
  to {
     @include transform(rotate(360deg));
    }
} 
.music_off{
    @include bgPos(0,-34px);
}

.section{
  // background-color: #10151f;
    position: relative;
    @include background(#10151f);
    @include box-sizing( border-box);
   
    height: 100%; 
    max-width: 640px;left: 0;right: 0;margin: 0 auto;}

.section1{height: 100%;width: 100%;}
.section-bg{width: 100%;top: 16.5%;position: absolute;left: 0;right: 0;margin: 0 auto;}
.section1-box{position: absolute;top: 0;height: 96%;width: 100%;vertical-align: middle;}
.section1-top-right,.section1-bottom-left1,.section1-bottom-pic,.section1-bottom-pic2{
    -webkit-writing-mode:vertical-rl;writing-mode:tb-rl;position: absolute;letter-spacing:0.2rem;
}
.section1-top-right{
    top: 5%;right: 10%;
    @include fontSize(1.1rem);
    @include opacity(0);
}
.active .section1-top-right{
    @include animation(section1 5s ease 1s 1);
 }/*调用名称为section1的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
.section1-bottom-left1{left: 9%;color: #449001;bottom:0;font-weight: bold;
     @include fontSize(1.2rem);
     @include opacity(0);
}
.active .section1-bottom-left1{ 
    @include animation(section1 4s ease 2s 1 forwards);
}

.section1-bottom-pic{bottom: 10%;left:18%;
     @include opacity(0);
}
.active .section1-bottom-pic,.active .section1-bottom-pic2{ 
    @include animation(section1 4s ease 2s 1 forwards);
}

.section1-bottom-pic2{bottom: 5%;right:5%;width: 40%; 
    @include opacity(0);
}
@include keyframes (section1){
    0%{ @include opacity(0);
    }
    100%{ @include opacity(1);
    }
}

.section2-top{text-align: center;color: #fff;@include fontSize(1rem);margin: 0 auto;position: absolute;top: 7%;;left: 0;right: 0;line-height: 1.5rem;}
.section2-top span{
     @include opacity(0);
}
.active .section2-top span.section2-span1,.active .section4-bottom-info span.section4-span1,.active .section5-menu span.section5-span1{ 
    @include animation(section1 2s ease 1s 1 forwards);
}
.active .section2-top span.section2-span2,.active .section4-bottom-info span.section4-span2,.active .section5-menu span.section5-span2{ 
     @include animation(section1 2s ease 2s 1 forwards);
}
.active .section2-top span.section2-span3,.active .section4-bottom-info span.section4-span3,.active .section5-menu span.section5-span3{ 
    @include animation(section1 2s ease 3s 1 forwards);
}
.active .section2-top span.section2-span4{ 
    @include animation(section1 2s ease 4s 1 forwards);
}
.section2_bottom-pic1,.section2_bottom-pic2{position: absolute;left: 0;right: 0;}
.section2_bottom-pic1{width: 30%;top: 27%;display: inline-block;margin: 0 auto ;
     @include opacity(0);
}
.active .section2_bottom-pic1{ 
    @include animation(section2 2s linear 2s 1 infinite);
}

@include keyframes (section2){
     0% {
        @include transform(scale(1, 1));
   }
       100% {
        @include transform(scale(1.1,1.1));
         @include opacity(1);
    }
}
.section2_bottom-pic2{width: 100%;bottom: 0;margin-top:5%;
     @include opacity(0);
}
.active .section2_bottom-pic2{ 
        @include animation(section1 5s linear 1s 1 forwards);
                                }
.section3-top-bg{width: 100%;top: 0;text-align: center;}
.section3-top-pic{position: absolute;width: 50%;top: 31%;left: 6%;
     @include opacity(0);
}
.active .section3-top-pic{ 
    @include animation (pic1 2s linear 1s 1 forwards);
    }
@include keyframes (pic1){
        0%{left: 0;}
        100%{left: 6%;
        @include opacity(1);
        }
    }

.section3-center-info{position: absolute;right: 6%;text-align: right;top: 45%;font-weight:900;font-family: 'FZDaBiaoSong-B06S';
    @include fontSize(1.6rem);
     @include opacity(0);
}
.active .section3-center-info{ 
    @include animation(section3 2s linear 1s 1 forwards);
}
@include keyframes (section3){
    0%{top: 0;
         @include opacity(0.3);
    }
    50%{top: 20%;
         @include opacity(0.7);
    }
    100%{top: 45%;
         @include opacity(1);
    }
}

.section3-bottom-info{right: 5%;position: absolute;bottom: 15%;text-decoration: underline;line-height: 1.7rem;
    @include fontSize(1.1rem);
     @include opacity(0);
}
.active .section3-bottom-info{
    @include animation (section1 3s ease 2s 1 forwards);
}

.section3-bottom-pic{position: absolute;bottom: 10%;left:10%;
     @include opacity(0);
}
.active .section3-bottom-pic{
    @include animation(section1 2s ease 1s 1 forwards);
}


.section4-top-pic{top: 4%;position: absolute;left: 0;right: 0;margin: 0 auto;
     @include opacity(0);
}
.active .section4-top-pic{
    @include animation(section4TopPic 2s ease-in 3s 1 forwards);
}
@include keyframes (section4TopPic){
    0%{top: 20%;
         @include opacity(0.3);
    }
    50%{
         @include opacity(0.8);
        top: 10%;}
    100%{
         @include opacity(1);
        top: 4%;}
}
.section4-top-bg{width: 100%;margin-top: 23%;}
.section4-bottom-box{margin: 0 auto;width: 80%;color: #e9ebea;}
.section4-bottom-title{border-bottom: 1px solid #fff;text-align: left;font-family: 'FZDaBiaoSong-B06S';font-weight: bold;
    @include fontSize(1.6rem);
     @include opacity(0);
}
.active .section4-bottom-title{
    @include animation(section4 2s linear 1s 1 forwards);
}

@include keyframes (section4){
    0%{
        @include transform(scale(1.2,1.2));
         @include opacity(0.5);
    }
    50%{
        @include transform(scale(1.1,1.1));
        @include opacity(0.8);

    }
    100%{
         @include transform(scale(1));
        @include opacity(1);
    }

}
.section4-bottom-info{@include fontSize(1rem);text-align: left;text-decoration: underline;line-height: 1.7rem;margin-top: 5%;}
.section4-bottom-info span{
    @include opacity(0);
}

.section5-box{color: #e9ebea;font-family: 'FZDaBiaoSong-B06S';}
.section5-bottom-pic{position: absolute;left: 13%;top: 3%;
    @include opacity(0);
}
.active .section5-bottom-pic{
    @include animation(section1 1s ease-in-out 1s 1 forwards);
}


.section5-menu,.section5-top-info{-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;letter-spacing:0.3rem;position: absolute;text-align: left;line-height: 1.5rem;}
.section5-menu{right: 13%;top: 3%;@include fontSize(1.1rem);font-weight: bold;color: #e9ebea;}
.active .section5-menu span{
    @include opacity(0);
}

@include keyframes (section5Menu){
    0%{right: 3%;    @include opacity(0.3);}
    50%{right: 9%;    @include opacity(0.7);}
    100%{right: 13%;    @include opacity(1);}
}

.section5-top-info{top: 3%;text-decoration: underline;right: 40%;color: #e9ebea;padding-bottom: 4px;display: inline-block; @include fontSize(0.8rem);@include opacity(0);}
.active .section5-top-info{
    @include animation(section1 5s ease-in-out 2s 1 forwards);
     }

.section5-center-bg{width: 100%;display: inline-block;margin-top: 40%;}
.section5-bottom-line{width: 100%;display: inline-block;}
.section5-bottom-box{margin: 0 auto;width: 80%;position: absolute;left: 0;right: 0;bottom: 0;}
.section5-title{color: #e9ebea;font-weight: bold;padding: 0;@include fontSize(1.2rem);}



.section5-btn{margin: 6% auto 20% auto;}
.btn-pin,.bth-share{
  color: #e9ebea;@include background(#332e36);@include fontSize(1.2rem);font-family: 'microsoft yahei';
  text-align: center;display: inline-block;border:1px solid #b2b1b3;border-radius: 5px;padding: 5px 10px;text-decoration: none;}
.bth-share{margin-left: 13%;}

.section5-public{font-family: 'microsoft yahei';@include fontSize(1rem);position: absolute;bottom: 8%;left: 0;right: 0;margin: 0 auto;}
.active .section5-public{
  @include background();
    background: -webkit-gradient(linear,left top,right top,
        color-stop(0.5, #3CAF5A),color-stop(0.7, #3CAF5A),color-stop(0.8, white),
        color-stop(0.9, #3CAF5A),color-stop(1, #3CAF5A));
            background-clip: text;
            -webkit-background-clip: text;
            @include text-fill-color(transparent);
            @include animation(slidetounlock 2s linear infinite)
  }

@include keyframes (slidetounlock) { 
    0% {
        @include bgPos(-150px,0);
    } 
    80%{
        @include bgPos(100px,0);
    } 
    100% {
        @include bgPos(150px,0);
    }
}

.top-dt img{display: inline-block;width: 23px;height: 23px; position: fixed; left: 0;bottom: 10px; z-index: 10;right: 0;    @include opacity(0);margin: 0 auto;z-index: 99999;}
.active .top-dt img{
    @include animation(topDt 2s infinite linear 1s);
    @include opacity(0);
}
@include keyframes (topDt){   
        0%{bottom: 20px;}
        100%{bottom: 10px;@include opacity(1);}

    }
/*我要分享弹出*/
.dialog-filter{z-index: 99999999;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,.35);width: 100%;height: 100%;}
.dialog-info{position: absolute;top: 50%;line-height: 20px;margin: 0 auto;left: 0;right: 0;color: #fff;width: 60%;font-weight: 900;}
.dialog-pic{right: 0;width: 50%;top: 10px;position: absolute;}
.active .dialog-pic{
    @include animation(jian 1s linear infinite);
}
@include keyframes (jian){
    0%{top: 15px;}
    100%{top: 10px;}
}
